<template>
  <view class="introduction-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 顶部导航栏 -->
    <view class="custom-nav-bar">
      <view class="left" @tap="goBack">
        <!-- 使用与"服务项目"页一致的返回按钮图标 -->
        <image src="/static/icon/返回_return.svg" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="center"></view>
      <view class="right">
        <text class="save-btn" @tap="saveIntroduction">保存</text>
      </view>
    </view>

    <!-- 编辑区域 -->
    <view class="edit-section">
      <!-- 工作年限 -->
      <view class="field-group">
        <input
          v-model="workYears"
          class="intro-input"
          type="number"
          placeholder="请输入工作年限(数字, 单位:年)"
        />
      </view>

      <!-- 技师类型 -->
      <view class="field-group">
        <input
          v-model="technicianType"
          class="intro-input"
          placeholder="请输入技师类型, 例如: 推拿技师"
        />
      </view>

      <textarea
        v-model="introduction"
        class="intro-textarea"
        placeholder="请输入您的个人简介，让客户更了解您..."
        :maxlength="500"
        auto-height
      />
      <view class="word-count">{{ introduction.length }}/500</view>
    </view>

    <!-- 提示区域 -->
    <view class="tips-section">
      <view class="tips-title">
        <text class="iconfont icon-info"></text>
        <text>写简介建议</text>
      </view>
      <view class="tips-content">
        <text class="tip-item">· 描述您的专业技能和从业经验</text>
        <text class="tip-item">· 介绍您擅长的按摩项目和特色服务</text>
        <text class="tip-item">· 分享您获得的资质认证和荣誉</text>
        <text class="tip-item">· 突出您的服务特点和优势</text>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      introduction: '',
      workYears: '',
      technicianType: '',
      originalIntro: '', // 用于存储原始简介，判断是否有修改
      originalWorkYears: '', // 原始工作年限
      originalType: '', // 原始技师类型
      technicianId: '' // 用于存储技师ID
    }
  },

  onLoad() {
    // 获取本地保存的用户信息
    const userInfoStr = uni.getStorageSync('userInfo')
    if (userInfoStr) {
      try {
        let userInfo
        // 解析用户信息，可能是字符串格式
        if (typeof userInfoStr === 'string') {
          const parsed = JSON.parse(userInfoStr)
          // 检查是否是登录响应格式
          if (parsed.code === 200 && parsed.data) {
            userInfo = parsed.data
          } else {
            userInfo = parsed
          }
        } else {
          userInfo = userInfoStr
        }
        
        // 为technicianId赋值
        this.technicianId = userInfo.techId || ''
        console.log('获取到的technicianId:', this.technicianId)
        
        // 获取technicianId后，立即请求技师详细信息
        if (this.technicianId) {
          this.loadTechnicianInfo()
        }
      } catch (e) {
        console.error('解析用户信息失败:', e)
        uni.showToast({
          title: '获取用户信息失败',
          icon: 'none'
        })
      }
    } else {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      })
    }
  },
  methods: {
    goBack() {
      if (this.introduction !== this.originalIntro ||
          this.workYears !== this.originalWorkYears ||
          this.technicianType !== this.originalType) {
        uni.showModal({
          title: '提示',
          content: '您的修改尚未保存，确定要离开吗？',
          success: (res) => {
            if (res.confirm) {
              uni.navigateBack()
            }
          }
        })
      } else {
        uni.navigateBack()
      }
    },

    // 获取技师详细信息
    async loadTechnicianInfo() {
      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/technician/technician/${this.technicianId}`,
          method: 'GET'
        })

        console.log('获取技师信息响应:', result.data)

        if (result.data.code === 200) {
          // 获取introduction字段
          const technicianInfo = result.data.data
          this.introduction = technicianInfo.introduction || ''
          this.workYears = technicianInfo.workYears || ''
          this.technicianType = technicianInfo.technicianType || ''
          this.originalWorkYears = this.workYears
          this.originalType = this.technicianType
          this.originalIntro = this.introduction
          console.log('获取到的introduction:', this.introduction)
        } else {
          console.log('获取技师信息失败:', result.data.msg)
        }
      } catch (err) {
        console.error('请求技师信息异常:', err)
        uni.showToast({
          title: '加载信息失败',
          icon: 'none'
        })
      }
    },

    async saveIntroduction() {
      if (this.introduction === this.originalIntro &&
          this.workYears === this.originalWorkYears &&
          this.technicianType === this.originalType) {
        uni.navigateBack()
        return
      }

      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/technician/technician/introduction`,
          method: 'POST',
          data: {
            introduction: this.introduction,
            workYears: this.workYears,
            technicianType: this.technicianType,
            technicianId: this.technicianId
          }
        })

        if (result.data.code === 200) {
          // 更新原始值，避免goBack时提示未保存
          this.originalIntro = this.introduction
          this.originalWorkYears = this.workYears
          this.originalType = this.technicianType
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1000) // 缩短等待时间
        } else {
          uni.showToast({
            title: result.data.message || '保存失败',
            icon: 'none'
          })
        }
      } catch (err) {
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.introduction-container {
  min-height: 100vh;
  background: #FFFFFF;
  padding-bottom: 30rpx;

  .custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
    border-bottom: 1rpx solid #F5F5F5;
    
    .left {
      width: 88rpx;
      display: flex;
      align-items: center;
      
      .back-icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
    
    .center {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
    }
    
    .right {
      width: 100rpx;
      display: flex;
      justify-content: flex-end;

      .save-btn {
        font-size: 28rpx;
        color: #2B85E4;
      }
    }
  }

  .edit-section {
    margin-top: 108rpx;
    padding: 30rpx;
    position: relative;

    .field-group {
      margin-bottom: 30rpx;
    }

    .intro-input {
      width: 100%;
      height: 80rpx;
      font-size: 28rpx;
      color: #333;
      padding: 0 20rpx;
      background: #F8F8F8;
      border-radius: 8rpx;
      border: 2rpx solid #F8F8F8;

      &:focus {
        border-color: #FF4B4B; /* 与截图红框颜色保持一致，可根据主题色调整 */
      }
    }

    .intro-textarea {
      width: 100%;
      min-height: 300rpx;
      font-size: 28rpx;
      line-height: 1.6;
      color: #333333;
      padding: 20rpx;
      background: #F8F8F8;
      border-radius: 8rpx;
    }

    .word-count {
      position: absolute;
      right: 50rpx;
      bottom: 50rpx;
      font-size: 24rpx;
      color: #999999;
    }
  }

  .tips-section {
    margin: 40rpx 30rpx;
    background: #F8F8F8;
    border-radius: 8rpx;
    padding: 20rpx;

    .tips-title {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .iconfont {
        font-size: 28rpx;
        color: #2B85E4;
        margin-right: 10rpx;
      }

      text {
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
      }
    }

    .tips-content {
      display: flex;
      flex-direction: column;
      gap: 16rpx;

      .tip-item {
        font-size: 26rpx;
        color: #666666;
        line-height: 1.4;
      }
    }
  }
}
</style> 